//优势介绍
<template>
  <div class="project-superior">
    <h1>优势介绍</h1>
    <!-- 中间轮播 -->
    <div class="swiper-float">
      <swiper ref="mySwiper" :options="swiperOptions" class="swiper-outside">
        <swiper-slide class="swiper-text" v-for="(value,index) in floatingDataList" :key="index">
          <h1>{{value.title}}</h1>
          <p>{{value.p1}}</p>
          <p>{{value.p2}}</p>
          <div class="click">
            <router-link to="/">查看详情</router-link>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <!-- 背景轮播 -->
    <div class="swiper-bottom">
      <swiper ref="mySwiper" :options="swiperOptions2" class="swiper-outside">
        <swiper-slide
          class="swiper-text"
          v-for="(value,index) in bottomDataList"
          :key="index"
          :style="`background:url(${value.backgroundimg}) no-repeat top`"
        ></swiper-slide>
        <div class="swiper-pagination-tow" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProjectSuperior",
  data() {
    return {
      swiperOptions: {
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        speed: 2000,//滑动时间
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
          clickable :true,//点击按钮切换
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true
      },
      swiperOptions2: {
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        speed: 2000,//滑动时间
        pagination: {
          el: ".swiper-pagination-tow",
          clickable :true,//点击按钮切换
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true
      },
      // 背景轮播假数据
      bottomDataList: [
        {
          backgroundimg: require("../../../assets/img/top_visual.jpg")
        },
        {
          backgroundimg: require("../../../assets/img/top_visual.jpg")
        },
        {
          backgroundimg: require("../../../assets/img/top_visual.jpg")
        }
      ],
      //悬浮框轮播假数据
      floatingDataList:[
        {
          id:1,
          title:'解决管理难题',
          p1:'电梯维保在智能电梯维保平台记录上，实现一梯一档，电梯安全数据洞察物业管理员可在线申请维保电梯的档案文件，下载打印。',
          p2:'电梯维保在智能电梯维保平台记录上，实现一梯一档，电梯安全数据洞察物业管理员可在线申请维保电梯的档案文件'
        },
        {
          id:2,
          title:'解决管理难题',
          p1:'电梯维保在智能电梯维保平台记录上，实现一梯一档，电梯的档案文件，下载打印。',
          p2:'电梯维保在智能电梯维保平台记录上，实现一梯的档案文件'
        },{
          id:3,
          title:'解决管理难题',
          p1:'电梯维保在智能电梯维保平台记录上，实现一梯一档，电梯安全数据洞察物业管理员可在线申请维保电梯的档案文件，下载打印。',
          p2:'电梯维保在智能电梯维保平员可在线申请维保电梯的档案文件'
        },
        {
          id:4,
          title:'解决管理难题',
          p1:'电梯维保在智能洞察物业管理员可在线申请维保电梯的档案文件，下载打印。',
          p2:'电梯维保在智能电梯维保平台记录上，实现一梯一档，电梯安全数据洞察物业管理员可在线申请维保电梯的档案文件'
        }
      ]
    };
  }
};
</script>
<style lang='scss' scoped>
.project-superior {
  height: 950px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  color: black;
  overflow: hidden;
  h1 {
    margin-top: 80px;
    font-size: 50px;
    font-weight: 500;
    text-align: center;
  }
  .swiper-bottom {
    margin-top: 50px;
    height: 700px;
    width: 100%;
    .swiper-outside {
      height: 100%;
      width: 100%;
      /deep/ .swiper-pagination-tow {
        position: absolute;
        text-align: center;
        bottom: 57px;
        .swiper-pagination-bullet {
          border-radius: 0;
          opacity: 1;
          background-color: #ccc;
          transform: rotate(45deg);
          height: 6px;
          width: 6px;
          margin: 0 3.3%;
          position: relative;
        }
        .swiper-pagination-bullet-active {
          position: relative;
          background-color: #007aff;
          &::after {
            position: absolute;
            top: -3.5px;
            left: -3.5px;
            display: block;
            content: "";
            height: 11px;
            width: 11px;
            border: 1px solid #007aff;
          }
        }
      }
    }
  }
  .swiper-float {
    position: relative;
    &::before{
      position: absolute;
      z-index: 999;
      top: 52px;
      left: 329px;
      content: '';
      height: 169px;
      width: 2px;
      background-color: #4F7BD9;
    }
    .swiper-outside {
      z-index: 99;
      width: 374px;
      height: 452px;
      position: absolute;
      top: 150px;
      left: 300px;
      background-color: #fff;
      .swiper-text {
        color: black;
        padding: 0 50px ;
        box-sizing: border-box;
       h1{
         margin-top: 50px;
         font-size: 30px;
         text-align: left;
         
       }
       p{
         margin-top: 23px;
         font-size: 14px;
         color: #666666;
        letter-spacing:1px ;
        line-height: 26px;
        
       }
        .click {
          margin-top: 10px;
           position: relative;
          a {
            display: inline-block;
            width: 59px;
            height: 30px;
            font-size: 14px;
            color:#4f7bd9 ;
            text-align: center;
            line-height: 30px;
            &::after {
              position: absolute;
              top: 11px;
              left: 57px;
              content: "";
              height: 7px;
              width: 7px;
              transform: rotate(45deg);
              border-top: 1px solid #4f7bd9;
              border-right: 1px solid #4f7bd9;
            }
          }
        }
      }
      /deep/ .swiper-pagination-fraction {
        position: absolute;
        bottom: 14px;
        height: 30px;
        width: 80px;
        left: 77%;
        font-size: 20px;
      }
    }
  }
}
</style>
